import React from "react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Accordion,
  AccordionItem,
  Tabs,
  Tab,
  Card,
  CardBody,
  Divider,
  Link
} from "@nextui-org/react";

export interface HelpCenterModalProps {
  isOpen: boolean;
  onOpenChange: () => void;
}

export default function HelpCenterModal({ isOpen, onOpenChange }: HelpCenterModalProps) {
  return (
    <Modal 
      isOpen={isOpen} 
      onOpenChange={onOpenChange}
      size="3xl"
      scrollBehavior="inside"
      backdrop="blur"
    >
      <ModalContent>
        {(onClose) => (
          <>
            <ModalHeader className="flex flex-col gap-1">
              <h2 className="text-xl font-bold">帮助中心</h2>
              <p className="text-small text-default-500">获取使用Me Notes的指南和常见问题解答</p>
            </ModalHeader>
            <ModalBody>
              <Tabs aria-label="帮助中心选项卡" color="primary" variant="underlined" classNames={{
                tab: "h-12",
              }}>
                <Tab key="guide" title="使用指南">
                  <div className="px-1 py-2">
                    <h3 className="text-medium font-bold mb-3">快速开始</h3>
                    <Card className="mb-4">
                      <CardBody>
                        <h4 className="text-medium mb-2">1. 创建笔记</h4>
                        <p className="text-small text-default-700 dark:text-default-400 mb-2">
                          在主页面右上角点击&quot;+&quot;按钮，选择创建新笔记，输入标题和内容即可创建一个新的笔记。
                        </p>
                        <p className="text-small text-default-700 dark:text-default-400">
                          支持Markdown语法格式化，可以使用快捷键<code>Ctrl+B</code>加粗文本，<code>Ctrl+I</code>斜体文本等。
                        </p>
                      </CardBody>
                    </Card>

                    <Card className="mb-4">
                      <CardBody>
                        <h4 className="text-medium mb-2">2. 组织笔记</h4>
                        <p className="text-small text-default-700 dark:text-default-400 mb-2">
                          使用标签功能对笔记进行分类，在笔记编辑页面底部添加标签。创建收藏夹将相关笔记组织在一起。
                        </p>
                        <p className="text-small text-default-700 dark:text-default-400">
                          可以使用拖放功能调整笔记顺序，或点击笔记右上角的菜单进行更多操作。
                        </p>
                      </CardBody>
                    </Card>

                    <Card className="mb-4">
                      <CardBody>
                        <h4 className="text-medium mb-2">3. 分享与协作</h4>
                        <p className="text-small text-default-700 dark:text-default-400 mb-2">
                          点击笔记编辑页面的分享按钮，可以生成分享链接或直接邀请其他用户进行协作。
                        </p>
                        <p className="text-small text-default-700 dark:text-default-400">
                          支持设置权限级别：只读、评论或编辑。分享后可随时修改权限或取消分享。
                        </p>
                      </CardBody>
                    </Card>

                    <Card>
                      <CardBody>
                        <h4 className="text-medium mb-2">4. AI助手功能</h4>
                        <p className="text-small text-default-700 dark:text-default-400 mb-2">
                          点击顶部导航栏的&quot;AI助手&quot;，可以使用智能助手功能帮助生成内容、优化文章或解答问题。
                        </p>
                        <p className="text-small text-default-700 dark:text-default-400">
                          在笔记编辑状态下，选中文本后按<code>Ctrl+Space</code>可以快速调用AI进行内容优化或扩展。
                        </p>
                      </CardBody>
                    </Card>
                  </div>
                </Tab>
                <Tab key="faq" title="常见问题">
                  <div className="px-1 py-2">
                    <Accordion selectionMode="multiple">
                      <AccordionItem key="1" aria-label="如何修改账户信息？" title="如何修改账户信息？">
                        <p className="text-small text-default-700 dark:text-default-400">
                          点击右上角的头像图标，选择&quot;个人设置&quot;，您可以在此修改用户名、邮箱和密码等信息。
                          头像可以通过上传本地图片或使用内置头像进行更换。
                        </p>
                      </AccordionItem>
                      <AccordionItem key="2" aria-label="笔记是否支持版本控制？" title="笔记是否支持版本控制？">
                        <p className="text-small text-default-700 dark:text-default-400">
                          是的，Me Notes自动保存笔记的历史版本。您可以在笔记编辑页面点击右上角的历史按钮，
                          查看或恢复之前的版本。系统默认保留最近30天的版本历史。
                        </p>
                      </AccordionItem>
                      <AccordionItem key="3" aria-label="如何导入/导出笔记？" title="如何导入/导出笔记？">
                        <p className="text-small text-default-700 dark:text-default-400">
                          在设置页面的&quot;数据管理&quot;选项卡中，您可以选择导出所有笔记为Markdown或HTML格式。
                          同样，您也可以从其他平台导入Markdown、HTML或纯文本文件作为新笔记。
                        </p>
                      </AccordionItem>
                      <AccordionItem key="4" aria-label="离线时能否使用？" title="离线时能否使用？">
                        <p className="text-small text-default-700 dark:text-default-400">
                          Me Notes支持离线编辑功能。当网络恢复后，离线期间的更改将自动同步到云端。
                          您也可以在设置中启用&quot;自动缓存&quot;功能，以确保即使在完全离线状态下也能访问最近查看的笔记。
                        </p>
                      </AccordionItem>
                      <AccordionItem key="5" aria-label="数据安全性如何保障？" title="数据安全性如何保障？">
                        <p className="text-small text-default-700 dark:text-default-400">
                          Me Notes采用端到端加密技术保护您的数据安全。所有笔记在传输和存储过程中都会进行加密，
                          同时系统采用SM4国密算法对敏感数据进行额外保护。我们定期进行安全审计和备份，确保数据安全和可靠性。
                        </p>
                      </AccordionItem>
                    </Accordion>
                  </div>
                </Tab>
                <Tab key="shortcut" title="快捷键">
                  <div className="px-1 py-2">
                    <h3 className="text-medium font-bold mb-3">编辑器快捷键</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                      <Card className="p-0">
                        <CardBody>
                          <h4 className="text-medium font-bold mb-2">基础操作</h4>
                          <div className="space-y-2">
                            <div className="flex justify-between">
                              <span className="text-small">新建笔记</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + N</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">保存笔记</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + S</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">查找</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + F</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">替换</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + H</code>
                            </div>
                          </div>
                        </CardBody>
                      </Card>
                      
                      <Card className="p-0">
                        <CardBody>
                          <h4 className="text-medium font-bold mb-2">格式化</h4>
                          <div className="space-y-2">
                            <div className="flex justify-between">
                              <span className="text-small">加粗</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + B</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">斜体</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + I</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">插入链接</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + K</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">插入代码块</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + Shift + C</code>
                            </div>
                          </div>
                        </CardBody>
                      </Card>
                    </div>

                    <Divider className="my-4" />

                    <h3 className="text-medium font-bold mb-3">应用快捷键</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                      <Card className="p-0">
                        <CardBody>
                          <h4 className="text-medium font-bold mb-2">导航</h4>
                          <div className="space-y-2">
                            <div className="flex justify-between">
                              <span className="text-small">前往首页</span>
                              <code className="text-small bg-default-100 px-1 rounded">Alt + H</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">打开标签页</span>
                              <code className="text-small bg-default-100 px-1 rounded">Alt + T</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">切换夜间模式</span>
                              <code className="text-small bg-default-100 px-1 rounded">Alt + D</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">打开设置</span>
                              <code className="text-small bg-default-100 px-1 rounded">Alt + S</code>
                            </div>
                          </div>
                        </CardBody>
                      </Card>
                      
                      <Card className="p-0">
                        <CardBody>
                          <h4 className="text-medium font-bold mb-2">AI功能</h4>
                          <div className="space-y-2">
                            <div className="flex justify-between">
                              <span className="text-small">AI助手</span>
                              <code className="text-small bg-default-100 px-1 rounded">Alt + A</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">优化选中文本</span>
                              <code className="text-small bg-default-100 px-1 rounded">Ctrl + Space</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">生成摘要</span>
                              <code className="text-small bg-default-100 px-1 rounded">Alt + G</code>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-small">翻译选中文本</span>
                              <code className="text-small bg-default-100 px-1 rounded">Alt + Shift + T</code>
                            </div>
                          </div>
                        </CardBody>
                      </Card>
                    </div>
                  </div>
                </Tab>
              </Tabs>
            </ModalBody>
            <ModalFooter>
              <Button color="primary" variant="light" onPress={onClose}>
                关闭
              </Button>
              <Button 
                color="primary" 
                as={Link}
                href="mailto:uyevan@163.com" 
                showAnchorIcon
              >
                联系支持
              </Button>
            </ModalFooter>
          </>
        )}
      </ModalContent>
    </Modal>
  );
} 